<script setup lang="ts">
import {message} from "ant-design-vue";
import {Chart} from "@vue-chart/echart";

import dayjs from "dayjs";
import moment from "moment";
import EChart from "~/contentScripts/views/echart.vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin, userInfo} from "~/logic";
import {getCurrentInstance} from "vue";
import {CustomerOverViewShopCustomerTrend} from "~/utils/interception/sycm/customerOverviewInterception";
import RequestInterception from "~/utils/RequestInterception";

const {proxy} = getCurrentInstance();
const req: RequestInterception = proxy.$req;
const visible = ref(false);
const loginVisible = ref(false);
onMounted(() => {
  userInfo()
})

const loading = ref(false);
dayjs.locale('zh-cn')
const dataSource = ref<any>([]);

const __option = getCurrentInstance()?.appContext.provides.option;
const handle = () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    loadData();
  }
}
let echartOptions = {
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['有购买行为的访客数', '无购买行为的访客数', '新访客数', '店铺客群数'],
  },
  toolbox: {
    feature: {
      saveAsImage: {
        name: '店铺客户访问统计',
      },
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: '有购买行为的访客数',
      type: 'line',
      // stack: '总量',
      smooth: true,
      data: [],
    },
    {
      name: '无购买行为的访客数',
      type: 'line',
      // stack: '总量',
      smooth: true,
      data: [],
    },
    {
      name: '新访客数',
      type: 'line',
      // stack: '总量',
      smooth: true,
      data: [],
    },
    {
      name: '店铺客群数',
      type: 'line',
      // stack: '总量',
      smooth: true,
      data: [],
    },
  ],
};
const loadData = () => {
  showChart.value = false;
  let data = req.getResponse(CustomerOverViewShopCustomerTrend);
  if (!data) {
    return message.error('获取数据失败，请刷新页面重试！');
  }
  dataSource.value = [];
  for (let i = 0; i < data.data.statDate.length; i++) {
    dataSource.value.push({
      'statDate': moment(data.data.statDate[i]).format('YYYY-MM-DD'),
      'hasPurchaseCnt': data.data.hasPurchaseCnt[i],
      'noPurchaseCnt': data.data.noPurchaseCnt[i],
      'newVisitorCnt': data.data.newVisitorCnt[i],
      'shopCustomer': data.data.shopCustomer[i],
    })
  }
  echartOptions.xAxis[0].data = data.data.statDate.map((item: string) => moment(item).format('YYYY-MM-DD'));
  echartOptions.series[0].data = data.data.hasPurchaseCnt;
  echartOptions.series[1].data = data.data.noPurchaseCnt;
  echartOptions.series[2].data = data.data.newVisitorCnt;
  echartOptions.series[3].data = data.data.shopCustomer;
  visible.value = true;
  nextTick(() => {
    showChart.value = true;
  })
}
const columns = [
  {
    title: '日期',
    dataIndex: 'statDate',
    key: 'statDate',
    sorter: (a: any, b: any) => dayjs(a.statDate).unix() - dayjs(b.statDate).unix(),
  },
  {
    title: '有购买行为的访客数',
    dataIndex: 'hasPurchaseCnt',
    key: 'hasPurchaseCnt',
    sorter: (a: any, b: any) => a.hasPurchaseCnt - b.hasPurchaseCnt,
    align: 'center',
  },
  {
    title: '无购买行为的访客数',
    dataIndex: 'noPurchaseCnt',
    key: 'noPurchaseCnt',
    sorter: (a: any, b: any) => a.noPurchaseCnt - b.noPurchaseCnt,
    align: 'center',
  },
  {
    title: '新访客数',
    dataIndex: 'newVisitorCnt',
    key: 'newVisitorCnt',
    sorter: (a: any, b: any) => a.newVisitorCnt - b.newVisitorCnt,
    align: 'center',
  },
  {
    title: '店铺客群数',
    dataIndex: 'shopCustomer',
    key: 'shopCustomer',
    sorter: (a: any, b: any) => a.shopCustomer - b.shopCustomer,
    align: 'center',
  },
];
const showChart = ref(false);
</script>

<template>

  <base-app>
    <a-button-group>
      <user @login="loginVisible=true" :style="{
        marginRight: '0',
      }"
      />
      <a-button type="primary" @click="handle" size="small">一键转化</a-button>
    </a-button-group>
    <a-modal v-model:visible="visible" title="客户-客户概况-店铺客户" :footer="null" width="840px" style="top: 40px;">
      <EChart :options="echartOptions" v-if="showChart" style="height: 300px;"/>
      <a-divider/>
      <base-table :scroll="{
        y:350,
      }" table-name="客户-客户概况-店铺客户" :data-source="dataSource" :columns="columns"
      >

      </base-table>
    </a-modal>

    <user-login-modal :login-visible="loginVisible" @close="loginVisible = false"/>
  </base-app>
</template>

<style scoped>

</style>
